<script setup>

// *=========================页面常量==========================*/
//路径导航
import {isNotEmpty, isNotNull} from "../../../../util/index.js";
import {myPage} from "../../../../util/request.js";
import {onMounted, reactive, ref} from "vue";
import {deleteApi, deleteBatchApi, pageApi} from "../../../../util/axios.js";
import {notYet} from "../../../../util/index.js";
import MyNav from "../../../../components/MyNav.vue"
import MyHead from "../../../../components/MyHead.vue";
import MyTable from "../../../../components/MyTable.vue";
import MyPager from "../../../../components/MyPager.vue";

//当前父菜单ID和菜单名称
let pid = sessionStorage.getItem('pid');
let pTitle = sessionStorage.getItem('pTitle');

// *=========================页面常量==========================*/
//路径导航
const navItems = [
  {icon: 'User', label: '用户管理'},
  {icon: 'Flag', label: '菜单列表（一级菜单）', url: '/Menu'},
  {icon: 'Flag', label: '菜单列表（二级菜单）'},
];

//页面头
const headItems = [
  {type: 'ipt', span: 5, placeholder: '按标题搜索', callback: pageLikeTitle},
];

//表格列
const columns = [
  {label: '标题', prop: 'title', width: 150},
  {label: '图标', prop: 'icon', type: 'icon', width: 65, sortable: false},
  {label: '序号', prop: 'idx', type: 'tag', width: 65},
  {label: '地址', prop: 'url', width: 100, sortable: false},
  {label: '描述', prop: 'info', type: 'card', width: 500, sortable: false, tooltip: false},
];

// *=========================分页查询==========================*/
//表格行+分页+菜单标题
let records = ref();
let pageInfo = reactive({pageNum: 1, pageSize: 5, callback: page});
let title = ref();

//
async function page(pageNum = pageInfo['pageNum'],
                    pageSize = pageInfo['pageSize']) {
  let config = {
    records, pageInfo,
    api: pageApi,
    params: {pageNum, pageSize, pid},
    args: {module: 'menu'},
  }
  if (isNotEmpty(title.value)) config['params']['title'] = title.value;
  await myPage(config);
  Object.values(records.value)
      .forEach(menu => menu['title'] = `${pTitle} / ${menu['title']}`);
}

// *=========================按菜单标题模糊查询==========================*/
//
function pageLikeTitle(val) {
  if (isNotNull(val) || title.value) {
    title.value = val;
    page();
  }
}

// *=========================加载函数==========================*/
onMounted(() => page());
</script>

<template v-if="records">
  <my-nav :items="navItems"/>
  <my-head :items="headItems"/>
  <my-table module="menu"
            insert-page="/SubMenuInsert"
            update-page="/SubMenuUpdate"
            :delete-api="deleteApi"
            :delete-batch-api="deleteBatchApi"
            :delete-callback="page"
            :excel-api="notYet"
            :records="records"
            :columns="columns"/>
  <my-pager :page-info="pageInfo"/>
</template>

<style scoped lang="scss">

</style>